import barOption from '../options/echarts.bar';
import lineOption from '../options/echarts.line';
import pieOption from '../options/echarts.pie';
import scatterOption from '../options/echarts.scatter';
import pictorialOption from '../options/echarts.pictorial';
import radarOption from '../options/echarts.radar';
import funnelOption from '../options/echarts.funnel';
import gaugeOption from '../options/echarts.gauge';
import mapOption from '../options/echarts.map';
import textOption from '../options/others.text';
import marqueeOption from '../options/others.marquee';
import imageOption from '../options/others.image';
import tableOption from '../options/others.table';
import timeOption from '../options/others.time';
import defaultImage from "@/assets/images/border.png";
import { v4 as uuidv4 } from 'uuid';
import _ from "lodash";

const WidgetEnumsMap = {
  0: {
    layer: {
      name: "柱形图",
      icon: "iconfont icon-tubiao-zhuzhuangtu",
    },
    entity: "chart-bar",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'legend', 'grid', 'tooltip', 'xAxis', 'yAxis', 'series', 'color']
    },
    defaultOption: barOption,
    defaultData: {
      categories: ["苹果", "华为", "小米", "oppo", "vivo"],
      series: [
        {
          name: "手机品牌",
          data: [10999, 8688, 4899, 4799, 4588],
        },
        {
          name: "手机品牌2",
          data: [5099, 3688, 5899, 2799, 8588],
        },
      ],
    }
  },
  1: {
    layer: {
      name: "折线图",
      icon: "iconfont icon-tubiao-zhexiantu",
    },
    entity: "chart-line",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'legend', 'grid', 'tooltip', 'xAxis', 'yAxis', 'series', 'color']
    },
    defaultOption: lineOption,
    defaultData: {
      categories: ["苹果", "华为", "小米", "oppo", "vivo"],
      series: [
        {
          name: "手机品牌",
          data: [10999, 8688, 4899, 4799, 4588],
        },
      ],
    }
  },
  2: {
    layer: {
      name: "饼图",
      icon: "iconfont icon-tubiao-bingtu",
    },
    entity: "chart-pie",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'legend', 'tooltip', 'series', 'color']
    },
    defaultOption: pieOption,
    defaultData: [
      { value: 10999, name: "苹果" },
      { value: 8688, name: "华为" },
      { value: 4899, name: "小米" },
      { value: 4799, name: "oppo" },
      { value: 4588, name: "vivo" },
    ],
  },
  3: {
    layer: {
      name: "散点图",
      icon: "iconfont icon-sandiantu",
    },
    entity: "chart-scatter",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'grid', 'tooltip', 'xAxis', 'yAxis', 'series', 'color']
    },
    defaultOption: scatterOption,
    defaultData: [
      {
        name: "男性",
        value: [
          [160, 60],
          [170, 64],
          [180, 72],
          [190, 75],
          [200, 82],
        ],
      },
      {
        name: "女性",
        value: [
          [155, 39],
          [160, 45],
          [170, 48],
          [180, 55],
          [190, 60],
        ],
      },
    ],
  },
  4: {
    layer: {
      name: "象形图",
      icon: "iconfont icon-xiangxingtu",
    },
    entity: "chart-pictorial",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'grid', 'tooltip', 'xAxis', 'yAxis']
    },
    defaultOption: pictorialOption,
    defaultData: [
      { value: 10999, name: "苹果" },
      { value: 8688, name: "华为" },
      { value: 4899, name: "小米" },
      { value: 4799, name: "oppo" },
      { value: 4588, name: "vivo" },
    ],
  },
  5: {
    layer: {
      name: "雷达图",
      icon: "iconfont icon-radarchart",
    },
    entity: "chart-radar",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'legend', 'tooltip', 'color']
    },
    defaultOption: radarOption,
    defaultData: {
      indicator: [
        {
          name: "销售",
          max: 6500,
        },
        {
          name: "管理",
          max: 16000,
        },
        {
          name: "信息技术",
          max: 30000,
        },
        {
          name: "客服",
          max: 38000,
        },
        {
          name: "研发",
          max: 52000,
        },
        {
          name: "市场",
          max: 25000,
        },
      ],
      series: [
        {
          data: [
            {
              value: [4300, 10000, 28000, 35000, 50000, 19000],
              name: "预算分配",
            },
            {
              value: [5000, 14000, 28000, 31000, 42000, 21000],
              name: "实际开销",
            },
          ],
        },
      ],
    },
  },
  6: {
    layer: {
      name: "漏斗",
      icon: "iconfont icon-loudoutu",
    },
    entity: "chart-funnel",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'legend', 'tooltip', 'series', 'color']
    },
    defaultOption: funnelOption,
    defaultData: [
      { value: 10999, name: "苹果" },
      { value: 8688, name: "华为" },
      { value: 4899, name: "小米" },
      { value: 4799, name: "oppo" },
      { value: 4588, name: "vivo" },
    ],
  },
  7: {
    layer: {
      name: "仪表盘",
      icon: "iconfont icon-yibiaopan",
    },
    entity: "chart-gauge",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'tooltip']
    },
    defaultOption: gaugeOption,
    defaultData: {
      min: 0,
      max: 100,
      name: "及格率",
      value: 96,
      unit: "%",
    }
  },
  8: {
    layer: {
      name: "地图",
      icon: "iconfont icon-ditu",
    },
    entity: "chart-map",
    prop: {
      entity: "prop-echarts",
      values: ['title', 'tooltip', 'series']
    },
    defaultOption: mapOption,
    defaultData: [
      {
        name: "广东",
        value: [113.12244, 23.009505, 100],
      },
      {
        name: "浙江",
        value: [119.5313, 29.8773, 50],
      },
      {
        name: "新疆",
        value: [87.9236, 43.5883, 500],
      },
    ]
  },
  9: {
    component: "others-text",
    layer: {
      name: "通用文本",
      icon: "iconfont icon-wenzi",
    },
    entity: "others-text",
    prop: {
      entity: "prop-others",
      values: []
    },
    defaultOption: textOption,
    defaultData: {
      value: "文字内容"
    }
  },
  10: {
    layer: {
      name: "滚动文本",
      icon: "iconfont icon-hengxiangwenben",
    },
    entity: "others-marquee",
    prop: {
      entity: "prop-others",
      values: []
    },
    defaultOption: marqueeOption,
    defaultData: {
      value: "滚动文本内容"
    }
  },
  11: {
    layer: {
      name: "图片样式",
      icon: "iconfont icon-tupian",
    },
    entity: "others-image",
    prop: {
      entity: "prop-others",
      values: []
    },
    defaultOption: imageOption,
    defaultData: {
      value: defaultImage
    }
  },
  12: {
    layer: {
      name: "数据表格",
      icon: "iconfont icon-biaoge",
    },
    entity: "others-table",
    prop: {
      entity: "prop-others",
      values: []
    },
    defaultOption: tableOption,
    defaultData: [
      {
        name: "11111",
        age: 18,
        address: "1111111",
      },
      {
        name: "22222",
        age: 19,
        address: "2222222",
      },
      {
        name: "33333",
        age: 20,
        address: "3333333",
      },
      {
        name: "44444",
        age: 21,
        address: "4444444",
      },
      {
        name: "55555",
        age: 22,
        address: "5555555",
      },
      {
        name: "66666",
        age: 23,
        address: "6666666",
      },
    ],
  },
  13: {
    layer: {
      name: "实时时间",
      icon: "el-icon-date",
    },
    entity: "others-time",
    prop: {
      entity: "prop-others",
      values: []
    },
    defaultOption: timeOption,
    defaultData: {
      value: ""
    }
  }
}

function getWidgetEnums(type) {
  if (typeof type === 'number') {
    type = type.toString();
  }
  if (Object.keys(WidgetEnumsMap).indexOf(type) !== -1) {
    return WidgetEnumsMap[type];
  }
  return null;
}

export function initWidgetInfo(type) {
  let target = getWidgetEnums(type);
  if (target === null) {
    return null;
  }
  let location = {
    width: 450,
    height: 280,
    top: 10,
    left: 10,
  }

  // 特定组件的一些微调
  if (target.entity === 'chart-map') {
    location.width = 800;
    location.height = 500;
  } else if (target.entity === 'others-text') {
    location.width = 200;
    location.height = 50;
  } else if (target.entity === 'others-marquee') {
    location.width = 200;
    location.height = 50;
  } else if (target.entity === 'others-image') {
    location.width = 200;
    location.height = 200;
  } else if (target.entity === 'others-table') {
    location.width = 450;
    location.height = 200;
  } else if (target.entity === 'others-time') {
    location.width = 200;
    location.height = 50;
  }

  // 需要修改的属性，如果是对象类型的话，一定要进行深拷贝，否则就会改一变多
  return {
    id: uuidv4(),
    active: false,
    layer: _.cloneDeep(target.layer),
    location: location,
    type: type,
    entity: target.entity,
    prop: target.prop,
    option: _.cloneDeep(target.defaultOption),
    data: _.cloneDeep(target.defaultData),
    service: {
      type: 0, // 0：静态数据，1：接口数据，2：SQL数据，3：WebSocket
      timestamp: new Date().getTime(), // 主要用于属性面板通知组件刷新数据
      api: { // OpenAPI的属性
        url: "",
        method: "GET", // 只支持GET、POST
        refresh: 10000, // 刷新频率：默认10秒
      },
      websocket: {
        url: ""
      },
      sql: {
        // TODO 以后实现
      }
    }
  }
}